<template>
	<div class="cartcontrol">
		<transition name="move">
			<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
				<span class="inner icon-remove_circle_outline"></span>
			</div>
		</transition>
		<div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
		<div class="cart-add icon-add_circle" @click="addCart">
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
export default {
	props: {
		food: {
			type:Object
		}
	},
	methods: {
		addCart(event) {
			if (!event._constructed) {
				return;
			}
			if (!this.food.count) {
				Vue.set(this.food, 'count', 1);
			} else {
				this.food.count++;
			}
			// console.log(event.target)
			this.$emit('add', event.target);
		},
		decreaseCart(event) {
			if (!event._constructed) {
				return;
			}
			this.food.count--;
		}
	}
}
</script>

<style lang="stylus" scoped>
.cartcontrol
	display flex
	line-height 36px
.cart
	&-add,&-decrease
		color #00a0dc
		padding 6px
		font-size 24px
		line-height 24px
	&-count
		color #93999f
		font-size 10px
		margin 0 2.5px
.cart-decrease
		opacity 1
		transform translate3d(0, 0, 0)
	.inner
		display block
		line-height 24px
		font-size 24px
		color rgb(0, 160, 220)
		transition all 0.4s linear
		transform rotate(0)
	&.move-enter-active, &.move-leave-active
		transition all 0.4s linear
	&.move-enter, &.move-leave-to
		opacity 0
		transform translate3d(24px, 0, 0)
		.inner
			transform rotate(180deg)
</style>
